/*
 * Copyright 2022 The Kubernetes Authors
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import 'Colors';
@import '../Terminal/mixins';
@import '../ProgressStepper/mixins';

$small: 0.5rem;
$regular: 0.75rem;

@mixin MiniProgressStepper {
  @include ProgressStepper {
    &[data-mini] {
      @content;
    }
  }
}

@mixin Complete {
  &[data-is-complete='true'] {
    @content;
  }
}

@mixin Incomplete {
  &[data-is-complete='false'] {
    @content;
  }
}

@include MiniProgressStepper {
  --pf-c-progress-stepper__step-icon--Width: #{$regular};

  height: 1.125rem;
  display: flex;
  align-items: center;

  @include Spinner {
    --sk-color: var(--color-yellow);
  }

  @include Connector {
    align-items: center;
    height: $regular;
  }
  @include ConnectorUI {
    --pf-c-progress-stepper__step-connector--before--Left: 50%;
    --pf-c-progress-stepper__step-connector--before--Top: 50%;
    display: none;
  }

  @include ProgressStep {
    display: block; /* Rather than `contents`, so we can wrap a Tooltip */
  }
  @include IconLink {
    display: block; /* Rather than `contents`, so we can wrap a Tooltip */
  }

  @include Icon {
    width: auto;
    font-size: $regular;
    &:hover {
      background-color: $hover-color;
    }
  }

  @include ProgressStep {
    @include Icon {
      border-width: 0;
      border-radius: 0;
      width: $small;
      height: $small;
      font-size: $small;
    }
    @include NotBlank {
      @include Icon {
        border: none;
      }
    }
  }
}

@include MiniProgressStepper {
  @include Complete {
    @include ProgressStep {
      @include Icon {
        &:not(:hover) {
          background-color: $complete-color;
        }
      }
    }
  }
}

@include MiniProgressStepper {
  @include Incomplete {
    @include ProgressStep {
      @include Success {
        @include Icon {
          &:not(:hover) {
            background-color: $success-color;
          }
        }
      }
      @include Error {
        @include Icon {
          &:not(:hover) {
            background-color: $error-color;
          }
        }
      }
      @include Blank {
        --opacity: 0.15;
        @include Optional {
          @include Icon {
            &:not(:hover) {
              --opacity: 0.05;
              border: 1px dotted $hover-color;
            }
          }
        }
        @include Icon {
          &:not(:hover) {
            background-color: rgba($blank-color, var(--opacity));
          }
        }
      }
    }
  }
}

@include MiniProgressStepper {
  --pf-c-progress-stepper--GridTemplateRows: max-content;
  --pf-c-progress-stepper--GridTemplateColumns: max-content;
  grid-gap: 0px;
  grid-auto-columns: max-content;
}

@include MiniProgressStepper {
  @include ProgressStep {
    margin: 0;
  }
}
